<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套路由</title>
    <script src="/js/js/vue.js"></script>
    <script src="/js/js/vue-router_3.0.2.js"></script>
</head>
<body>
    <div id="app">

        <router-view></router-view>
    </div>
    <script>
        // 组件
        var user={
            props:['uid','uname'],
            template:`
            <div>
                <h1>用户 id={{uid}} 用户名={{uname}}</h1>
                <button @click="handle">去注册</button>
            </div>`,
            methods:{
                handle(){
                    this.$router.push('/reg')
                }
            }
        }
        var reg={
            template:`
            <div>
                <h1>注册</h1>
                <button @click.prevent='handle'>用户</button>
            </div>`,
            methods:{
                handle(){
                    // 页面跳转
                    // this.$router.push('/user')

                    // 带参
                    // this.$router.push({
                    //     name:'yh',
                    //     params:{
                    //         uid:10,
                    //         uname:'小明'
                    //     }
                    // })

                    // 回到刚才来的页面
                    //this.$router.go(-1);
                }
            }
        }
       
        // 嵌套路由配置
        var router = new VueRouter({
            routes:[
                {path:'/',redirect:'/user'},
                {name:'yh',props:true,path:'/user',component:user},
                {path:'/reg',component:reg}
            ]
        })
        
        var vm = new Vue({
            el:'#app',
            data:{},
            router: router // 挂载路由
        })
       
    </script>
</body>
</html>
